<template>
  <div class="paper-home-container">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <h1 class="main-title">论文首页（彭婷萍）</h1>
      <div class="subtitle">大数据论文管理系统</div>
    </div>

    <!-- 用户个人信息区域 -->
    <el-card class="user-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-user"></i> 用户个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="user-avatar">
          <el-avatar :size="80" :src="userInfo.avatar"></el-avatar>
        </div>
        <div class="user-details">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">学号/工号：</span>
            <span class="value">{{ userInfo.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">院系/部门：</span>
            <span class="value">{{ userInfo.department }}</span>
          </div>
          <div class="info-item">
            <span class="label">专业/职位：</span>
            <span class="value">{{ userInfo.major }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ userInfo.contact }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 论文信息区域 -->
    <el-card class="paper-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-document"></i> 论文信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleAddPaper">添加论文</el-button>
      </div>
      <el-table :data="paperList" style="width: 100%" stripe>
        <el-table-column prop="title" label="论文标题" min-width="200"></el-table-column>
        <el-table-column prop="authors" label="作者" width="150"></el-table-column>
        <el-table-column prop="journal" label="期刊/会议" width="180"></el-table-column>
        <el-table-column prop="publishDate" label="发表日期" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleViewPaper(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="handleEditPaper(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 论文结论区域 -->
    <el-card class="paper-conclusion-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-edit-outline"></i> 论文结论</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleEditConclusion">编辑</el-button>
      </div>
      <div class="conclusion-content">
        <p v-for="(paragraph, index) in conclusion" :key="index" class="conclusion-paragraph">
          {{ paragraph }}
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PaperHomePtp',
  data() {
    return {
      // 用户信息
      userInfo: {
        name: '彭婷萍',
        id: '20210002',
        department: '计算机科学与技术学院',
        major: '大数据技术与应用',
        contact: 'ptp@example.com',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      // 论文列表
      paperList: [
        {
          id: 1,
          title: '基于机器学习的大数据预测模型研究',
          authors: '彭婷萍, 李明',
          journal: '数据科学与工程',
          publishDate: '2023-06-20',
          status: '已发表'
        },
        {
          id: 2,
          title: '大数据环境下的数据挖掘技术应用',
          authors: '彭婷萍, 张华',
          journal: '计算机应用研究',
          publishDate: '2023-09-15',
          status: '已发表'
        },
        {
          id: 3,
          title: '基于分布式计算的大数据处理优化方法',
          authors: '彭婷萍',
          journal: '大数据技术与应用',
          publishDate: '2024-02-10',
          status: '审稿中'
        }
      ],
      // 论文结论
      conclusion: [
        '本研究通过深入分析大数据技术在不同领域的应用，提出了一系列创新性的解决方案。首先，我们设计了一种基于机器学习的数据预测模型，该模型能够有效处理大规模、高维度的数据集，并在多个基准测试中取得了优异的性能。',
        '其次，针对大数据环境下的数据挖掘问题，我们开发了一种新的算法，该算法在保证数据准确性的同时，最大限度地提高了数据处理效率。',
        '最后，我们提出了一种基于分布式计算的大数据处理优化方法，该方法能够显著提高数据处理速度，降低计算成本。实验结果表明，与传统方法相比，我们的方法在处理效率上提高了35%，计算成本降低了20%。'
      ]
    }
  },
  methods: {
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        '已发表': 'success',
        '审稿中': 'warning',
        '已退稿': 'danger',
        '待提交': 'info'
      }
      return statusMap[status] || 'info'
    },
    // 添加论文
    handleAddPaper() {
      this.$message({
        message: '添加论文功能开发中...',
        type: 'info'
      })
    },
    // 查看论文
    handleViewPaper(row) {
      this.$message({
        message: `查看论文: ${row.title}`,
        type: 'info'
      })
    },
    // 编辑论文
    handleEditPaper(row) {
      this.$message({
        message: `编辑论文: ${row.title}`,
        type: 'info'
      })
    },
    // 编辑结论
    handleEditConclusion() {
      this.$message({
        message: '编辑结论功能开发中...',
        type: 'info'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-home-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 84px);
}

.header-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 25px 0;
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;

  .main-title {
    font-size: 32px;
    margin: 0;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .subtitle {
    font-size: 16px;
    margin-top: 12px;
    opacity: 0.95;
    letter-spacing: 1px;
  }
}

.user-info-card,
.paper-info-card,
.paper-conclusion-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  
  i {
    margin-right: 8px;
    color: #1e3a8a;
  }
}

.user-info-content {
  display: flex;
  align-items: center;
  padding: 10px 0;
  
  .user-avatar {
    margin-right: 30px;
    flex-shrink: 0;
  }
  
  .user-details {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      font-size: 15px;
      line-height: 1.6;
      
      .label {
        display: inline-block;
        width: 100px;
        color: #4b5563;
        font-weight: 600;
        letter-spacing: 0.5px;
        flex-shrink: 0;
      }
      
      .value {
        color: #1f2937;
        font-weight: 500;
        letter-spacing: 0.3px;
      }
    }
  }
}

.conclusion-content {
  line-height: 1.8;
  padding: 5px 0;
  
  .conclusion-paragraph {
    margin-bottom: 18px;
    text-indent: 2em;
    color: #374151;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    text-align: justify;
  }
}

.el-table {
  font-size: 14px;
}
</style>